<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model.number="num1">
        +
        <input type="text" v-model.number="num2">
        =
        {{ sum }}


        <p>{{ sum }}</p>
        <p>{{ sum }}</p>
        <p>{{ sum }}</p>
        <p>{{ sum }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    num1: 0,
                    num2: 0
                }
            },
            computed: {
                // 写计算属性的地方
                // 计算属性虽然本质是函数，但是用的时候当普通属性来用
                // 也就是普通属性能怎么用，计算属性就能怎么用
                // 计算属性有缓存：它会把计算的结果给缓存起来，下次用就直接从缓存起来取到结果
                // 直到计算属性里的依赖项发生改变，那么会重新调用一次计算出一个最新的结果
                // 再把最新结果缓存起来
                // 什么叫依赖项：它内部用到的别的数据
                sum () {
                    // 需要大量循环才计算出一个结果
                    console.log('sum被调用')
                    return this.num1 + this.num2
                }
            }
        })
    </script>
</body>
</html>